<!DOCTYPE html>

<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<title>首页</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/static/css/app.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">
    <!--<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">-->
	<link rel="stylesheet" href="/static/css/app1.css">
</head>

<body class="bg01">
	<header class="header" id ="top">
		<h3 id="province_province">计算机人才招聘大数据可视化</h3>
		<div id="wrapper">
        <div class="overlay"></div>

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
						导航
                    </a>
                </li>
                <li>
                    <a href="#" id="data_zx"><i class="fa fa-fw fa-home"></i> 大数据中心</a>
                </li>
                <li class="dropdown" id="baogao">
                  <a class="dropdown-toggle" data-toggle="dropdown" id="report1"><i class="fa fa-fw fa-plus"></i> 疫情专栏 <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li class="dropdown-header">Dropdown heading</li>
                    <li><a href="#">1-5月岗位数量变化</a></li>
                    <li><a href="#2">3-5月各规模公司招聘数量增比</a></li>
                    <li><a href="#3">1-5月各规模公司招聘数量每日<br>变化</a></li>
                    <li><a href="#4">1-5月各类型公司招聘数量变化</a></li>
                    <!--<li><a href="#5">One more separated link</a></li>-->
                  </ul>
                </li>
            </ul>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
          <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
          </button>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">

                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
	</header>
<!--	<form action="/job" method="get">-->
<!--		<input name="cate2" type="submit" value="Java开发工程师" style="position:absolute;top:0px;" />-->
<!--	</form>-->
	<div class="wrapper" style="display:block" id="bigdata">
		<div class="container-fluid">
			<div class="row fill-h">

				<div class="col-lg-3 fill-h">

					<div class="xpanel-wrapper xpanel-wrapper-2">

						<div class="xpanel">
							<!--行业人才招聘数量需求-->
							<!--<div class="xpanel1 title2"><span style="float:left">行业人才需求排行</span><span style="float:right"><span id="city1">全国</span>TOP10 </span></div>-->
							<!--<span id="demo"></span>-->
							<!--<iframe frameborder="0" width="100%" height="95%" srcdoc="<div ><div style='float:left'><font color='white'>{%for i in cate1_num%}<br>{{i[0]}}</br>{%endfor%}</font></div><div style='float:right'><font color='white'>{%for i in cate1_num%}<br>需求量：{{i[1]}}</br>{%endfor%}</font></div></div>">-->
							<!--</iframe>-->

							<div class="fill-h" id="cate1"></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-2">
						<div class="xpanel">
							<!--岗位人才需求排行-->

							<!--<div class="xpanel1 title2"><span style="float:left">岗位人才需求排行</span><span style="float:right"><span id="city2">全国</span>TOP10 </span></div>-->
							<!--<span id="demo1"></span>-->
							<!--<iframe frameborder="0" width="100%" height="95%" srcdoc='<div><div style="float:left"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}</br>{%endif%}{%endfor%}</font></div> <div style="float:right"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>需求量：{{i[1]}}</br>{%endif%}{%endfor%}</font></div></div>'>-->

							<!--</iframe>-->
							<!--<div>-->
							<!--<div style="float:left"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}</br>{%endif%}{%endfor%}</font></div>-->
							<!--<div style="float:right"><font color="white">{%for i in cate2_num%}{%if(i[0]=="其他")%}{%else%}<br>需求量：{{i[1]}}</br>{%endif%}{%endfor%}</font></div>-->
							<!--</div>-->
							<div class="fill-h" id="cate2"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 fill-h">
					<div  class="xpanel-wrapper xpanel-wrapper-1 " style="height: 13%;" >

						
						<div class="xpanel" id="title" style="padding: 0px;" >
							<div class="center_text">
							<span  id="jobsum_text" >岗位数量：</span><span id='jobsum' >加载中</span>
						</div>
						
						</div>
					</div>
					<div class="row" style="height: 87%;">
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div class="xpanel">
								<!--各个主要城市招聘人数-->
								<div class="fill-h" id="scatterMap"></div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-lg-3 fill-h">
					<div class="xpanel-wrapper xpanel-wrapper-1">
						<div class="xpanel">
							<div class="xpanel1 title2">
								<!--<center><span style="float:left">岗位</span>城市<span style="float:right">平均薪资 </span></center>-->
								<table width="100%">
									<tr style="color:white;font-size:16px;font-weight:bold;text-align:center;">
										<td width="40%">岗位</td>
										<td width="30%">省份/城市</td>
										<td width="30%">薪资</td>
									</tr>
								</table>
							</div>
							<span id="demo3"></span>
                            <div class="fill-h" id="demo4"></div>
							<!--<marquee direction=up behavior=scroll loop=-1 scrollamount=1 scrolldelay=10 align=top height=93% width=100% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()><font color="white">{%for i in cate2_2%}{%if(i[0]=="其他")%}{%else%}<br>{{i[0]}}&nbsp;&nbsp;&nbsp;&nbsp;{{i[1]}}&nbsp;&nbsp;&nbsp;&nbsp;{{i[2]}}</br>{%endif%}{%endfor%} </font></marquee>-->
							<!-- 省份地图 -->
							<!--<div class="fill-h" id="cate2"></div>-->

						</div>
					</div>
					<!--<div class="xpanel-wrapper xpanel-wrapper-3">-->
					<!--<div class="xpanel">-->
					<!--&lt;!&ndash; 区县地图 &ndash;&gt;-->
					<!--<div class="fill-h" id="expzb"></div>-->
					<!--</div>-->
					<!--</div>-->
				</div>
			</div>
		</div>
	</div>
	<!--报告页面的div-->
	<div id="jiazai" style= "display: block;height:700px;weight:500px"></div>
	<div id="report" style="display:none;">
	</div>

	<!-- 完整的,用于debug  -->
	<!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.js"></script> -->
	
	{# config是flask内置的对象，from_object那时设置的 #}

	{% if config['ENV']=='production' %}
	<!-- 部署时使用cdn加速的 -->
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
	{% else %}
	<!-- 开发时本地的echarts.js方便点 -->
	<script type="text/javascript" src="/static/js/echarts.min.js"></script>
	{% endif %}

	<script type="text/javascript" src="/static/js/echarts-map-china.js"></script>
	<!--<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>-->
	<!-- 城市数据，放在其他js好看点 -->
	<script type="text/javascript" src="/static/js/mapdata/city_geo.js"></script>
	<script type="text/javascript" src="/static/js/countUp.min.js"></script>
	<!-- 主题的js -->

	<!-- 一些工具类封装 -->
	<script type="text/javascript" src="/static/js/jobs.js"></script>
	<!--数据加载中-->
<!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
	<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<!--<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
    <script src="/static/js/bootstrap.min.js"></script>
    <!--<script src="/static/js/jquery.min.js"></script>-->
	<script type="text/javascript">

		$(document).ready(function () {
		  var trigger = $('.hamburger'),
		      overlay = $('.overlay'),
		     isClosed = false;

		    trigger.click(function () {
		      hamburger_cross();
		    });

		    function hamburger_cross() {

		      if (isClosed == true) {
		        overlay.hide();
		        trigger.removeClass('is-open');
		        trigger.addClass('is-closed');
		        isClosed = false;
		      } else {
		        overlay.show();
		        trigger.removeClass('is-closed');
		        trigger.addClass('is-open');
		        isClosed = true;
		      }
		  }
			$("#jiazai").hide()
		  <!--点击报告隐藏数据中心div-->
		$("#report1").on("click", function(){
			console.log("报告被点击")
			$("#jiazai").show()
			$("#bigdata").hide();
			$("#report").load("/ind2/report",function(){
				$("#jiazai").hide()
			});
			$("#report").show();
			<!--$("#report").load("/ind2/report");-->

		});
		<!--点击数据中心隐藏隐藏报告div-->
		$("#data_zx").on("click", function(){
			console.log("大数据中心被点击")
			<!--$("#report").hide();-->
			$("#report").hide();
			$("#bigdata").show();
		});
		<!--点击按钮展开导航栏-->
		  $('[data-toggle="offcanvas"]').click(function () {
		        $('#wrapper').toggleClass('toggled');
		  });
		});
	</script>
	<script type="text/javascript">
		// 加载省份地图完成了没有
		var loadMap=false;
		//各个主要城市招聘人数
		var chart6 = echarts.init(document.getElementById("scatterMap"));

		var chart7 = echarts.init(document.getElementById("jiazai"));

		load(chart7);

		//点击省份或城市
		chart6.on("click", function(params) {
			console.log(params)
			if (params.componentType == "series" && (params.name.indexOf("市") != -1 || params.name.indexOf("区") != -1 || params.name.indexOf("州") != -1 || params.name.indexOf("县") != -1 || params.name.indexOf("盟") != -1) && params.name != "贵州") {
				cate1Chart.clear(); //清除内容
				cate2Chart.clear();
				load(cate1Chart)  //显示正在加载
				load(cate2Chart)
				document.getElementById("demo3").innerHTML ="" //清除滚动数据
				$("#demo4").show()
				load(gundong)
				console.log("点击城市:")
				console.log(params)
				set_jobsum(params.name+"岗位数量：",params.value)//显示城市的招聘数量
				//显示城市信息
				city_post(params)
				//直接显示值
				fun_cates("",params.name)//显示城市的岗位需求
			} else if (params.componentType == "series" && (params.name.indexOf("岛") != -1)) {
			} else if (params.componentType == "series" && (params.name=="香港" || params.name=="澳门"|| params.name=="台湾" ||params.name=="北京" ||params.name=="重庆" || params.name=="上海" ||params.name=="天津")) {
				//设置为对应省份的数据
				cate1Chart.clear(); //清除内容
				cate2Chart.clear();
				load(cate1Chart)  //显示正在加载
				load(cate2Chart)
				document.getElementById("demo3").innerHTML ="" //清除滚动数据
				$("#demo4").show()
				load(gundong)
				province_click(params);
				set_jobsum(params.name+"岗位数量：",params.value)//显示城市的招聘数量
				fun_cates(params.name,"")//显示省份的岗位需求
			} else if (params.componentType == "series") {  
				//设置为对应省份的数据
				cate1Chart.clear(); //清除内容
				cate2Chart.clear();
				load(cate1Chart)  //显示正在加载
				load(cate2Chart)
				document.getElementById("demo3").innerHTML ="" //清除滚动数据
				$("#demo4").show()
				load(gundong)
				province_click(params);
				//进入省份地图前检查有没有这个地图
				var map = echarts.getMap(params.name);
				//地图还没注册
				if(map==null)
				{
					console.log("地图没加载完成:"+params.name)
				}
				else
				fun_city_num(params.name,jihe22['jihe']);
				fun_cates(params.name,"")//显示省份的岗位需求
			} else {
				console.log("点击了:"+params.name)
				city_post(params)
				fun_cates("",params.name)//显示城市的岗位需求
			}
			
			set_jobsum(params.name+"岗位数量：",params.value)//显示城市的招聘数量
			
		})

		// 绘制地图数据,地图和数据
		//map 为china,安徽这些地图的名字
		function fun_city_num(map,jihe) {
			
			var tooltip = jobs.getTooltip({

				formatter: function (params) {
					//中国地图时
					<!--console.log(isNaN(params.value))-->
					if(isNaN(params.value)){
						if(map=="china"&&loadMap==false)
						return "位置:" + params.name + "<br>" + "数量:" + "0" + "<br>" + "(省份地图加载中，请稍后)"
						else if(map=="china"&&loadMap==true)
						return "位置:" + params.name + "<br>" + "数量:" + "0" + "<br>" + "(点击进入该省份地图)"
						else
						return "位置:" + params.name + "<br>" + "数量:" + "0" + "<br>" + "(点击获取该城市招聘数据)"
					}else{
						if(map=="china"&&loadMap==false)
						return "位置:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(省份地图加载中，请稍后)"
						else if(map=="china"&&loadMap==true)
						return "位置:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击进入该省份地图)"
						else
						return "位置:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击获取该城市招聘数据)"
					}

				}
			})

			var isChina = true;
				if(map=="china")
				isChina=false;
			var option6 = {
				tooltip: tooltip,
                toolbox:{
                	itemSize:25,
                    feature:{
                        myReturn: {
							show: isChina,
							title: "返回全国地图",
							emphasis:{
								iconStyle:{
								 textFill:'white',
								 textPosition:'left',
								},
							},

							icon: "path://M538.622846 950.291255c257.534448-171.658591 308.738643-462.119963-75.504648-453.027887l0 225.514173L121.893676 381.529483 463.118198 40.281425l0 220.701564c218.259956-5.67321 470.02705 96.270601 470.02705 280.69596C933.146271 813.119105 768.337691 874.762047 538.622846 950.291255",

							iconStyle:{
								color:'#0ad2ec',

							},
							onclick: function () {
								<!--console.log("返回")-->
								cate1Chart.clear(); //清除内容
								cate2Chart.clear();
								fun_get_qg(c)
                                fun_city_num("china",province_jehe2);
                                set_jobsum ("岗位数量：",jihe22['jobsum'])
                                drawCate1(cateData_qg,"全国") //返回全国岗位数量
                                drawCate2(cateData_qg, "全部")//返回全国岗位数量
							}
						}
                    }
                },
				visualMap: {
					show : false,
					x: 'left',
					y: 'bottom',
					textStyle:{
					    color:'white',
					},
					splitList: [
						{start: 0, end:1000},{start: 1000, end: 10000},
						{start: 10000, end: 50000},{start: 50000, end: 100000},
						{start: 100000, end: 200000},{start: 200000, end: 600000},
					],
					color:["Navy","DarkBlue","Blue","RoyalBlue","CornflowerBlue","SkyBlue"],
            	},
            	series: [
        {
            name: "count",
            type: 'map',
            roam:true,
            mapType: map,
            // center:'center',
            label: {
                normal: {
                    show: true,//显示省份标签
                    color:"white",
                    verticalAlign:'top',
                },
                emphasis: {
                    show: true,//对应的鼠标悬浮效果
                },
            },
            itemStyle: {
				normal: {
					areaColor: 'SkyBlue',
				},
            },

            data: jihe
            }
        ]

			};
			<!--console.log(option6)-->
			//设置notMerge，不合并
			chart6.setOption(option6,true);
		}

		//点击城市转换-
		function city_post(params) {
			var name = {};
			name['name'] = params.name;
			post_3("hyrc_num1", "gwrc_num1", "gw_city_sal1", params)
		}

		//点击省份转换-
		function province_click(params) {
			var name = {};
			name['name'] = params.name;
			post_3("province_hyrc_num1", "province_gwrc_num1", "province_gw_city_sal1", params)

		}

		//POST行业人才
		function post_3(dir1, dir2, dir3, params) {
			var name = {};
			name['name'] = params.name.replace("市", "");
			//$.post("/ind2/"+dir1,data=name,result=>{-
			//var a="";-
			//for(var i=0;i<result.num.length;i++){-
			//a = a+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.hyrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
			//};-
			//document.getElementById("demo").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+a+"'></iframe>";-
			//document.getElementById("city1").innerHTML = params.name;-
			//})-

			//$.post("/ind2/"+dir2,data=name,result=>{-
			//var b="";-
			//for(var i=0;i<result.num.length;i++){-
			//b = b+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.gwrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
			//};-
			//document.getElementById("demo1").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+b+"'></iframe>";-
			//document.getElementById("city2").innerHTML = params.name;-
			//})-

			$.post("/ind2/" + dir3, data = name, function(result) {
                console.log(result.city['length'])
                if(result.city['length']==0){
                    console.log("当前地区暂无数据")
                    document.getElementById("demo3").innerHTML ="<span style=\"color:white;font-size:16;position: absolute;top: 50%;left: 50%;margin: -5% 0 0 -15%;\">当前地区暂无数据</span>"
                    loadoff(gundong)
                    $("#demo4").hide()
                }else{
                    var c = ""
                    for (var i = 0; i < result.gw.length; i++) {
                        c = c + "<tr style=\"color:white;font-size:14px;text-align:center;\"><td width=\"100%\" style=\"display:block;margin:5px;\">" + result.gw[i].replace("/", "<br/>") + "</td><td width=\"30%\">" + result.city[i] + "</td><td width=\"30%\">" + result.sal[i] + "</td>" + "</tr>"
                    }
                    document.getElementById("demo3").innerHTML = "<marquee direction=up behavior=scroll loop=-1 truespeed=20 scrollamount=1 scrolldelay=20 align=top height=93% width=100% hspace=0 vspace=10 onmouseover=this.stop() onmouseout=this.start()><table width=\"100%\" >" +
                        c
                        + "</table></marquee>";
                     $("#demo4").hide()
                }
            })

		}

		
		//设置数量文字
		function set_jobsum(text,num){

			console.log("set text:"+text)
			console.log("set num:"+num)
			//nan的
			if(isNaN(num))
			{
			    const countUp = new CountUp('jobsum', 0);
				$('#jobsum_text').text(text)
				<!--return "0";-->
			}else{
			    const countUp = new CountUp('jobsum', num,{

		});
			// jobsum
			$('#jobsum_text').text(text)


			//这里还有bug
			// countUp.update(num);
			if (!countUp.error) {
			countUp.start();
			} else {
			console.error(countUp.error);
			}
			}

		}
		function fun_cates(province,city){
			var name={}
			name['province']=province
			name['city']=city.replace("市","")
			$.post("/ind2/cates_num1",data=name,function(result){
				cateData = result;
				drawCate1(cateData,name['province']+name['city'])
				drawCate2(cateData, "全部")
			})
		}
	</script>

	<script>
		// 城市的工资数据
		<!--var jihe22 = {}-->
		fun_city_num('china', [{ name: "广东", value: 187899 }, { name: "广西", value: 179714 }])
		$.get("/ind2/city_num1", function(result) {
			jihe22 = result
			//$("#jobsum").text("岗位数量："+jihe22['jobsum'])
			set_jobsum("岗位数量：",jihe22['jobsum'])

		});
		<!--var province_jehe2={}-->
		$.get("/ind2/province", function(result){
                province_jehe2 = result
                <!--console.log(province_jehe2)-->
                fun_city_num("china",province_jehe2);
		 });

		//$.get("/ind2/hyrc_num",result=>{-
		//var a="";-
		//for(var i=0;i<result.num.length;i++){-
		//a = a+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.hyrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
		//};-
		//document.getElementById("demo").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+a+"'></iframe>";-
		//});-

		//$.get('/ind2/gwrc_num',result=>{-
		//var b="";-
		//for(var i=0;i<result.num.length;i++){-
		//b = b+"<span style=\"color:white;font-size:14px;line-height:2.2em\"><span style=\"float:left\">"+result.gwrc[i]+"</span>"+"<span style=\"float:right\">需求量："+result.num[i]+"</span></span><br/>"-
		//};-
		//document.getElementById("demo1").innerHTML = "<iframe frameborder=\"0\" width=\"100%\" height=\"95%\" srcdoc='"+b+"'></iframe>";-
		//});-


		<!--function fun_get_qg(){-->
			<!--$.get("/ind2/gw_city_sal", result => {-->
				<!--var c = ""-->
				<!--for (var i = 0; i < result.gw.length; i++) {-->
					<!--c = c + "<tr style=\"color:white;font-size:14px;text-align:center;\"><td width=\"100%\" style=\"display:block;margin:5px ;\">" + result.gw[i].replace("/", "<br/>") + "</td><td width=\"30%\">" + result.city[i] + "</td><td width=\"30%\">" + result.sal[i] + "</td>" + "</tr>"-->
				<!--}-->
				<!--document.getElementById("demo3").innerHTML = "<marquee direction=up behavior=scroll loop=-1 scrollamount=1 scrolldelay=10 align=top height=93% width=100% hspace=0 vspace=10 onmouseover=this.stop() onmouseout=this.start()><table width=\"100%\" >" +-->
					<!--c-->
					<!--+ "</table></marquee>";-->
			<!--})-->
		<!--}-->
		var c ={}
		$.get("/ind2/gw_city_sal", function(result) {
			c=result
			fun_get_qg(c)
		})
		function fun_get_qg(result){
				var c = ""
				for (var i = 0; i < result.gw.length; i++) {
					c = c + "<tr style=\"color:white;font-size:14px;text-align:center;\"><td width=\"100%\" style=\"display:block;margin:5px ;\">" + result.gw[i].replace("/", "<br/>") + "</td><td width=\"30%\">" + result.city[i] + "</td><td width=\"30%\">" + result.sal[i] + "</td>" + "</tr>"
				}
				document.getElementById("demo3").innerHTML = "<marquee direction=up behavior=scroll loop=-1 truespeed=20 scrollamount=1 scrolldelay=20 align=top height=93% width=100% hspace=0 vspace=10 onmouseover=this.stop() onmouseout=this.start()><table width=\"100%\" >" +
					c
					+ "</table></marquee>";
				$("#demo4").hide()
		}


	</script>
	<script>
		//分类1的图
		var cate1Chart = jobs.initChartId("cate1")
		//分类2的图
		var cate2Chart = jobs.initChartId("cate2")
		// 分类数据

		var gundong = jobs.initChartId("demo4")
		// 滚动条目

		load(gundong);
		var cateData = null;
		// 图1 点击事件
		cate1Chart.on("click", function(params) {
			console.log("点击分类1")
			console.log(params)
			var cate1 = params.name
			//切换分类2
			drawCate2(cateData, cate1)
		})
		cate2Chart.on("click", function(params) {
			<!--console.log("进入工作分析")-->
			<!--console.log(params.name)-->
			// 打开job蓝图下的index页面
			window.open("{{ url_for('job2.index')}}?cate2=" + params.name, "_blank");
		})

		load(cate1Chart);
		function drawCate1(data,name) {
			var tooltip = jobs.getTooltip({
				formatter: function (params) {
					return "职位大类:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击查看二级职位)"
				}
			})
			var cate1 = data['cate1_num'];
			<!--console.log("输出cate1:")-->
			<!--console.log(cate1)-->
			var nums = []
			var cate1s = []
			for (var i = 0; i < cate1.length; i += 1) {
				nums.push(cate1[i].num)
				cate1s.push(cate1[i].cate1)
			}
			if(cate1.length ==0){
				<!--console.log("当前地区数据为0");-->
				option={
					title:[{
						text:name+"岗位大类需求"
					},{
						subtext:"当前地区暂无数据",
						subtextStyle:{
							color:'white',
							fontSize:'14',
						},
						left:'center',
						top:'center',
						}
					],
				}
			}else{
				option = {
					title:{
						text:name+"岗位大类需求"
					},

					tooltip: tooltip,
					// 数据缩放
					dataZoom: {
						borderColor: "transparent",
						showDetail: false,
						type: "slider",
						// 前10个
						endValue: 4,
						//控制y轴，垂直
						orient: "vertical",
					},
					grid: {
						// top: "5%",
						left: "0%",
						right:"10%",
						bottom:0,
						containLabel:true
					},

					xAxis: {
						show:false,
						name: "招聘数量",
						type: "value",
						axisLabel:{
							show:false
						}

					},
					yAxis: {
						name: "岗位大类",
						inverse: true,
						type: 'category',
						data: cate1s,
						axisLabel: {
							interval: 0,
							formatter: function (value, index) {
								if (value.length > 4)
									return value.substring(0, 4) + ".."
								else
									return value
							}
						}
					},
					series: [
						{
							label: {
								show: true,
								position: "right"
							},
							type: "bar",
							name: "cate1",
							data: nums
						}
					]
				}
			}
			<!--cate1Chart .hideLoading();-->
			loadoff(cate1Chart);
			cate1Chart.setOption(option)
		}

		//绘制分类2，指定要绘制的哪个cate1的cate2
		<!--cate2Chart.showLoading({-->
			  <!--text : '正在加载数据',-->
			  <!--textColor: 'white',-->
			  <!--color:'SkyBlue',-->
			  <!--maskColor: 'rgba(0, 0, 0, 0.2)',-->
			<!--});  //增加提示-->
		load(cate2Chart);
		function drawCate2(data, cate1) {
			var tooltip = jobs.getTooltip({
				formatter: function (params) {
					return "职位:" + params.name + "<br>" + "数量:" + params.value + "<br>" + "(点击进入职位分析)"
				}
			})

			// 设置cate2图表的标题
			$("#cate2-title").text(cate1 + "类岗位需求")
			var cate2 = data['cate2_num'][cate1]
			var nums = []
			var cate2s = []
			for (var i = 0; i < cate2.length; i += 1) {
				nums.push(cate2[i].num)
				cate2s.push(cate2[i].cate2)
			}
			<!--console.log("绘制cate2:")-->
			<!--console.log(cate2)-->
			if(cate2.length ==0){
				<!--console.log("当前地区数据为0");-->
				option={
					title:[{
						text:cate1 + "类岗位需求",
					},{
						subtext:"当前地区暂无数据",
						subtextStyle:{
							color:'white',
							fontSize:'14',
						},
						left:'center',
						top:'center',
						}
					],
				}
			}else{
				option = {

					title:{
						text:cate1 + "类岗位需求"
					},
					tooltip: tooltip,
					grid: {
						// top: "5%",
						// 字体大小12,最多6各字符串和两个点，84刚刚好，再加4

						left: "0%",
						right:"10%",
						bottom:0,
						containLabel:true


					},
					// 数据缩放
					dataZoom: {
						borderColor: "transparent",
						showDetail: false,
						type: "slider",
						// 前10个
						endValue: 4,
						//控制y轴，垂直
						orient: "vertical"
					},

					xAxis: {
						show:false,
						type: "value",

					},
					yAxis: {
						inverse: true,
						axisLabel: {
							interval: 0,
							// 最长六个字符串
							formatter: function (value, index) {
								if (value.length > 6)
									return value.substring(0, 6) + ".."
								else
									return value
							}
						},
						type: 'category',
						data: cate2s
					},
					series: [
						{
							label: {
								show: true,
								position: "right"
							},
							itemStyle: {
								// color:"rgba(0,191,255,0.1)"
							},
							type: "bar",
							name: "cate1",
							data: nums
						}
					]
				}
			}
			loadoff(cate2Chart);
			cate2Chart.setOption(option);


		}

		//请求分类数据
		var cateData_qg=null
		$.get("/ind2/cates_num", function(result) {
			cateData_qg =result;
			cateData = result;
			drawCate1(cateData,"全国")
			drawCate2(cateData, "全部")
		})

		// 请求地图数据，并注册
		$.getJSON("/static/json/provinces.json",function(result){
			for(var province in result)
			{
				<!--console.log("注册地图:"+province)-->
				echarts.registerMap(province,result[province])
				loadMap=true;
			}
		})

		<!--$(document).ready(function(){-->
		  <!--$("#province_map1").attr({"src":"/static/js/map/js/广东.js"})-->
		  <!--$("#province_map2").attr({"src":"/static/js/map/js/anhui.js"})-->
		<!--});-->


	</script>

	<!-- <script type="text/javascript" src="/static/js/map/js/guangdong.js"></script>
	<script type="text/javascript" src="/static/js/map/js/anhui.js"></script>
	<script type="text/javascript" src="/static/js/map/js/fujian.js"></script>
	<script type="text/javascript" src="/static/js/map/js/gansu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/guangxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/guizhou.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hainan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hebei.js"></script>
	<script type="text/javascript" src="/static/js/map/js/heilongjiang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/henan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hubei.js"></script>
	<script type="text/javascript" src="/static/js/map/js/hunan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jiangsu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jiangxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/jilin.js"></script>
	<script type="text/javascript" src="/static/js/map/js/liaoning.js"></script>
	<script type="text/javascript" src="/static/js/map/js/neimenggu.js"></script>
	<script type="text/javascript" src="/static/js/map/js/ningxia.js"></script>
	<script type="text/javascript" src="/static/js/map/js/qinghai.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shandong.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shanxi.js"></script>
	<script type="text/javascript" src="/static/js/map/js/shanxi1.js"></script>
	<script type="text/javascript" src="/static/js/map/js/sichuan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/xinjiang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/xizang.js"></script>
	<script type="text/javascript" src="/static/js/map/js/yunnan.js"></script>
	<script type="text/javascript" src="/static/js/map/js/zhejiang.js"></script> -->


	<!--<script type="text/javascript" src="/static/js/map/js/taiwan.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/tianjin.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/xianggang.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/shanghai.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/guangdong.js"></script>-->
		<!--<script type="text/javascript" src="/static/js/map/js/aomen.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/beijing.js"></script>-->
	<!--<script type="text/javascript" src="/static/js/map/js/chongqing.js"></script>-->
		<!--<script type="text/javascript" id="province_map1" ></script>-->
	<!--<script type="text/javascript" id="province_map2" ></script>-->
</body>

</html>